Admin Reskin: Cards by fabiankaegy · Pull Request #10862 · WordPress/wordpress-develop

fabiankaegy · 2026-02-04T11:13:36Z

Trac ticket: https://core.trac.wordpress.org/ticket/64549

This Pull Request is for code review only. Please keep all other discussion in the Trac ticket. Do not merge this Pull Request. See GitHub Pull Requests for Code Review in the Core Handbook for more details.

github-actions · 2026-02-04T11:13:49Z

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

Core Committers: Use this line as a base for the props when committing in SVN:

Props fabiankaegy, mukesh27, joedolson, navi161, phpbits.

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

Update all card and postbox styles to match Gutenberg's component patterns and the WordPress Design System specifications. **Base Card Styles:** - Background: #ffffff (white) - Border: 1px solid rgba(0,0,0,0.1) for subtle appearance - Border radius: 8px for dashboard widgets, plugin cards, theme cards, welcome panel - Border radius: 0 for post editor metaboxes (maintains existing behavior) - Padding: 16px for small cards, 16px 24px for medium cards **Dashboard Widgets:** - Border radius: 8px with rounded corners - Header padding: 12px vertical, 16px horizontal for compact appearance - Content padding: 16px (was 0 12px 12px) - "At a Glance" widget: 16px top padding for proper alignment - "Activity" widget: maintains 12px horizontal padding for layout compatibility - Welcome panel: 8px border radius, 24px padding (was 48px) **Drag and Drop Interactions:** - Gutenberg-style blue highlights using var(--wp-admin-theme-color) - Active drop zones: subtle blue background rgba(var(--wp-admin-theme-color--rgb), 0.04) - Sortable placeholder: 2px solid blue border with 8px border radius - Meta-box-sortables: 4px padding to reserve space for drag feedback - Container margins: adjusted to maintain original layout spacing - No dimensional changes during drag operations **Plugin Cards:** - Border radius: 8px with overflow hidden - Border: rgba(0,0,0,0.1) - Padding: 16px for top and bottom sections - Card bottom: updated border color for consistency **Theme Cards:** - Border radius: 8px with overflow hidden - Background: solid white (removed semi-transparent overlay) - Theme name: 16px padding, border-top instead of inset box-shadow - "Add New Theme" card: maintains transparent background and borderless style **Generic Card Component:** - Border radius: 8px - Padding: 16px 24px (was 0.7em 2em 1em) - Border: rgba(0,0,0,0.1) - Removed box-shadow for cleaner appearance **Post Editor Metaboxes:** - Maintains square corners (border-radius: 0) - Drag interactions: blue background tint, no border - 4px padding on sortables with compensating margins - Collapsed state: header border hidden See #64308. # Conflicts: # src/wp-admin/css/themes.css

github-actions · 2026-02-04T11:25:58Z

Test using WordPress Playground

The changes in this pull request can previewed and tested using a WordPress Playground instance.

WordPress Playground is an experimental project that creates a full WordPress instance entirely within the browser.

Some things to be aware of

The Plugin and Theme Directories cannot be accessed within Playground.
All changes will be lost when closing a tab with a Playground instance.
All changes will be lost when refreshing the page.
A fresh instance is created each time the link below is clicked.
Every time this pull request is updated, a new ZIP file containing all changes is created. If changes are not reflected in the Playground instance,
it's possible that the most recent build failed, or has not completed. Check the list of workflow runs to be sure.

For more details about these limitations and more, check out the Limitations page in the WordPress Playground documentation.

Test this pull request with WordPress Playground.

mukeshpanchal27

Look solid in playground. Keep it up

src/wp-admin/css/dashboard.css

joedolson

There are a few things I think could be tweaked here, but it's basically 👍.

src/wp-admin/css/common.css

src/wp-admin/css/dashboard.css

src/wp-admin/css/themes.css

navi151 · 2026-02-10T15:46:49Z

Tested this in Playground. The cards look fine as per the Figma designs.

QA Notes:

Dashboard (Quick Draft, At a Glance, Activity widgets)✅
Post editor metaboxes (Publish, Categories, Tags)✅
Plugins > Add New (plugin card grid)✅
Appearance > Themes (theme card grid)✅
Widgets screen✅
Verify collapsed states, drag-and-drop reordering, and focus states on toggle buttons. Test in at least two color schemes (modern and light).❗Issues Seen:

The collapse state is not working as expected. As I expand the menu, the expanded list, auto opens the Tools options. Video attached for reference.
There is a flash in the editor while switching between the Styles and Navigation option in the Editor

Added supporting media.
Tested using Playground.
Chrome: 144

PS: This is my first time testing a functionality. If I have missed something, please let me know.

https://github.com/user-attachments/assets/d652fe04-b730-4b2a-89dc-09b839815dc2
https://github.com/user-attachments/assets/c218c9e7-3029-42c3-8e85-3f4c5fd335af

cc @fabiankaegy @jeffpaul

Co-authored-by: Mukesh Panchal <mukeshpanchal27@users.noreply.github.com>

Copilot

Pull request overview

Updates wp-admin “card”-style UI components (themes, plugin cards, dashboard metaboxes, and generic .card) to match the “Admin Reskin: Cards” visual direction (rounded corners, updated padding, lighter separators, revised drag/drop styling).

Changes:

Restyles theme tiles and plugin cards with new padding, rounded corners, and updated separators.
Updates dashboard/postbox metabox spacing and drag/drop placeholder/empty-state visuals.
Adjusts global .card styling (padding, border, radius, background).

Reviewed changes

Copilot reviewed 6 out of 6 changed files in this pull request and generated 15 comments.

Show a summary per file

File	Description
`src/wp-admin/css/themes.css`	Theme tile/card reskin (borders, radius, header separator, overflow behavior).
`src/wp-admin/css/list-tables.css`	Plugin card reskin (borders, radius, padding, bottom separator).
`src/wp-admin/css/forms.css`	Updates generic `.card` styling to match new card design.
`src/wp-admin/css/edit.css`	Updates post screen metabox sortable drag-state styling and spacing.
`src/wp-admin/css/dashboard.css`	Updates dashboard widget gutters, metabox styling, and drag/empty drop-zone visuals.
`src/wp-admin/css/common.css`	Updates shared postbox/stuffbox styling and sortable placeholder visuals.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

src/wp-admin/css/dashboard.css

src/wp-admin/css/common.css

src/wp-admin/css/dashboard.css

src/wp-admin/css/themes.css

src/wp-admin/css/forms.css

src/wp-admin/css/edit.css

phpbits · 2026-02-13T14:25:42Z

@fabiankaegy Does this card reskin also includes the Classic Editor metaboxes?

Also, I am not sure if this is categorized as a card as well:

Thanks!

fabiankaegy · 2026-02-13T14:59:19Z

@phpbits right now no. I've kept the scope of it intentionally small

joedolson

LGTM.

mukeshpanchal27 · 2026-02-15T06:22:54Z

src/wp-admin/css/dashboard.css

-	margin: 0 8px 20px;
+	min-height: 0;
+	margin-right: 8px;
+	padding: 4px;


@fabiankaegy Dashboard empty widget box miss align by 4px. Check screenshot.

github-actions · 2026-02-15T08:18:14Z

A commit was made that fixes the Trac ticket referenced in the description of this pull request.

SVN changeset: 61646
GitHub commit: 5a8762c

This PR will be closed, but please confirm the accuracy of this and reopen if there is more work to be done.

fabiankaegy force-pushed the admin-reskin/cards branch from 9443309 to e0468b5 Compare February 4, 2026 11:18

mukeshpanchal27 reviewed Feb 4, 2026

View reviewed changes

src/wp-admin/css/dashboard.css Outdated Show resolved Hide resolved

joedolson requested changes Feb 9, 2026

View reviewed changes

src/wp-admin/css/common.css Outdated Show resolved Hide resolved

src/wp-admin/css/dashboard.css Outdated Show resolved Hide resolved

src/wp-admin/css/themes.css Show resolved Hide resolved

fabiankaegy and others added 6 commits February 11, 2026 09:15

Merge branch 'trunk' into admin-reskin/card

cb86f45

fix allignment of handle-actions inside postbox-header

9e56da2

fix use outline instead of border for dragging dashboard widgets

6bfe0c0

fix use alpha param of rgb instead of rgba

b7b65c6

Apply suggestion from @mukeshpanchal27

59e32be

Co-authored-by: Mukesh Panchal <mukeshpanchal27@users.noreply.github.com>

fix invisible column

334bc13

westonruter requested a review from Copilot February 11, 2026 18:41

Copilot started reviewing on behalf of westonruter February 11, 2026 18:41 View session

Copilot AI reviewed Feb 11, 2026

View reviewed changes

joedolson approved these changes Feb 14, 2026

View reviewed changes

mukeshpanchal27 reviewed Feb 15, 2026

View reviewed changes

github-actions bot closed this Feb 15, 2026

Comments

Conversation

fabiankaegy commented Feb 4, 2026

Uh oh!

github-actions bot commented Feb 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Feb 4, 2026

Test using WordPress Playground

Some things to be aware of

Uh oh!

mukeshpanchal27 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

joedolson left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

navi151 commented Feb 10, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

phpbits commented Feb 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

fabiankaegy commented Feb 13, 2026

Uh oh!

joedolson left a comment

Choose a reason for hiding this comment

Uh oh!

mukeshpanchal27 Feb 15, 2026

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Feb 15, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

github-actions bot commented Feb 4, 2026 •

edited

Loading

phpbits commented Feb 13, 2026 •

edited

Loading